<template>
    <div class="goods-detail" v-if="detail">
        <!-- 属性 -->
        <ul class="attrs">
            <li v-for="item in detail.properties" :key="item.name">
                <span class="dt">{{ item.name }}</span>
                <span class="dd">{{ item.value }}</span>
            </li>
        </ul>
        <!-- 图片 -->
        <img v-for="item in detail.pictures" :key="item" :src="item"
            alt="">
    </div>
</template>
  <script setup>
import { computed } from 'vue';

const props = defineProps({
    product: Object
})

const detail = computed(() => {
    return props.product.details
})
</script>
  <style scoped lang="scss">
  .goods-detail {
      padding: 40px;
  
      .attrs {
          display: flex;
          flex-wrap: wrap;
          margin-bottom: 30px;
  
          li {
              display: flex;
              margin-bottom: 10px;
              width: 50%;
  
              .dt {
                  width: 100px;
                  color: #999;
              }
  
              .dd {
                  flex: 1;
                  color: #666;
              }
          }
      }
  
      >img {
          width: 100%;
      }
  }
  </style>